<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    #main {
        width: 300px;
        height: 350px;
        margin: 10px auto;
    }

    #stage {
        border: 1px solid black;
        width: 300px;
        height: 300px;
        position: relative;
    }

    #level {
        border: 1px solid black;
        width: 300px;
        height: 25px;
    }

    #info {
        border: 1px solid black;
        width: 300px;
        height: 25px;
    }

    #food {
        border: 0px solid black;
        width: 15px;
        height: 15px;
        position: absolute;
        background-image: url(wz.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    #snake div {
        border: 1px solid black;
        width: 15px;
        height: 15px;
        position: absolute;
        border-radius: 15px;
    }

    #level {
        text-align: center;
    }
    #title{
        height: 50px;
        background-image: url(xwz.png);
        background-size: contain;
        background-repeat: no-repeat;
        text-align: center;
    }
</style>

<body>
    <div id="main">
        <div id="title">小王子贪吃蛇</div>
        <div id="stage">
            <div id="snake">
                <div style="left:30px;top:45px"></div>
                <div style="left:30px;top:30px"></div>
                <div style="left:30px;top:15px"></div>
            </div>
            <div style="left:90px;top:190px" id="food"></div>
        </div>
        <div id="level">
            <button data-interval =300>容易</button>
            <button data-interval =250>中等</button>
            <button data-interval="200">难</button>
        </div>
        <div id="info">分数：0</div>
    </div>

</body>
<script>
    var score = 0
    var currentDirect = ""
    var interval = 300
    var playState = 0
    var timer
    function createFood() {
        var food = document.querySelector("#food")
        //food =  document.getElementById("food")
        var left = parseInt(Math.random() * 20)
        var top = parseInt(Math.random() * 20)
        food.style.left = left * 15 + "px"
        food.style.top = top * 15 + "px"
    }
    //移动蛇
    function moveSnake(direct) {
        var list = document.querySelectorAll("#snake div")
        //从后往前，依次前移身体
        // for (var i = list.length - 1; i > 0; i--) //2 1 
        // {
        //     list[i].style.top = parseInt(list[i - 1].style.top) + "px"
        //     list[i].style.left = parseInt(list[i - 1].style.left) + "px"
        // }
        //优化算法
        var snake = document.querySelector("#snake")
        list[list.length - 1].style.top = list[0].style.top
        list[list.length - 1].style.left = list[0].style.left
        snake.insertBefore(list[list.length - 1], list[1])
        //移动脑袋
        moveHead(direct)
    }
    //移动头部
    function moveHead(direct) {
        var list = document.querySelectorAll("#snake div")
        var head = list[0]
        var left = parseInt(head.style.left)
        var top = parseInt(head.style.top)

        switch (direct) {
            case "ArrowUp":
                top = top - 15
                break;
            case "ArrowDown":
                top = top + 15
                break;
            case "ArrowLeft":
                left = left - 15
                break;
            case "ArrowRight":
                left = left + 15
                break;
        }
        head.style.top = top + "px"
        head.style.left = left + "px"
    }
    document.onkeydown = function (e) {
        if (e.key.indexOf("Arrow") > -1) {
            currentDirect = e.key
            start()
        }


    }
    function start() {
        if (playState == 0) {
            playState = 1
            timer = setInterval(function () {
                moveSnake(currentDirect);
                checkEat()
                checkMove()
            }, interval);
        }

    }
    function checkEat() {
        var food = document.querySelector("#food")
        var info = document.querySelector("#info")

        var list = document.querySelectorAll("#snake div")
        var head = list[0]
        //判断是否吃掉,吃掉加分
        if (food.style.left == head.style.left &&
            food.style.top == head.style.top) {
            score = score + 10
            createFood()
        }
        // score = score + 10
        //把分数显示在info上
        //todo
        info.innerHTML = "得分：" + score
    }
    function checkMove() {
        var list = document.querySelectorAll("#snake div")
        var head = list[0]

        //1. 有没有出边界
        if (parseInt(head.style.left) < 0 ||
            parseInt(head.style.left) >= 300 ||
            parseInt(head.style.top) < 0 ||
            parseInt(head.style.top) >= 300) {
            clearInterval(timer)  //清除定时器
            alert("失败！")
            window.location.reload()
            return false
        }
        //2.有没有碰到自己
        //i 从1开始 不检测头
        for (var i = 1; i < list.length; i++) {
            if (head.style.left == list[i].style.left && head.style.top == list[i].style.top) {
                clearInterval(timer)
                alert("失败！")
                window.location.reload()
                return false
            }
        }

    }
    createFood()
    function setLevel(){
        var btns = document.querySelectorAll("button")
        for(var i=0;i<btns.length;i++)
        {
            btns[i].onclick = function(e){
               interval = this.dataset.interval
            }
        }
    }
    setLevel()
</script>

</html>